<template>
    <div id="editorElem"></div>
</template>

<script type="text/ecmascript-6">
import request from '../common/js/request.js';
import E from "wangeditor";

let editor = null;

export default {
    data() {
        return {
            editorContent: '',
        }
    },

    props: ['fromData'],

    created() {
        // console.log(this.fromData)
    },

    watch: {
        fromData: {
            handler(val, oldVal) {
                this.editorContent = this.fromData || '';
                editor.txt.html(this.editorContent);
            },
            deep: true
        }
    },

    mounted() {
        this.wangedit();
        this.editorContent = this.fromData || '';
        editor.txt.html(this.editorContent);
    },

    methods: {
        wangedit() {
            editor = new E("#editorElem");
            editor.customConfig.onchange = (html) => {
                this.editorContent = html;
                this.$emit('toData', html);  //TODO这一句导致光标乱跳，待优化
            };
            editor.customConfig.linkImgCallback = function (url) {
                // url 即插入图片的地址 网络图片的回调函数
            };
            editor.customConfig.linkCheck = function (text, link) {
                return true;
            };
            editor.customConfig.uploadImgShowBase64 = true;
            editor.customConfig.customUploadImg = (files, insert) => {
                for (let i = 0; i < files.length; i++) {
                    let formData = new FormData();
                    formData.append("file", files[i]);
                    request({
                        url: "/manage/upload/image",
                        data: formData,
                    }).then((res) => {
                        insert(res.data.url);
                    });
                }
            };
            editor.create();
        },
    }
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
/deep/ .w-e-text-container {
    height: 600px !important;
}

/deep/ .w-e-menu {
    z-index: 2 !important;
}

/deep/ .w-e-text-container {
    z-index: 1 !important;
}
</style>
